<script setup lang="ts">
import { getBrandPage } from "@/api/basicArchives/brand";
import { getLabelPage } from "@/api/basicArchives/labelmanag";
import { getAreaPage } from "@/api/basicArchives/regiona";
import { getDepositorySimplePage } from "@/api/basicArchives/warehouseManagement";
import { DictSelect } from "@/components/common/DictSelect";
import { onMounted, ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    storeName: "",
    wtCode: undefined,
    contacts: "",
    address: "",
    contact: "",
    type: undefined,
    brandId: undefined,
    areaId: undefined,
    labelIdList: [],
    depositoryIdList: [],
    avgPrice: undefined,
    des: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

let options2 = ref([]);
let options3 = ref([]);
let options4 = ref([]);
let options5 = ref([]);

const params = {
  pageNum: 1,
  pageSize: 999
};

async function brandList() {
  const { data } = await getBrandPage(params);
  options2.value = data.records;
}

async function areaList() {
  const { data } = await getAreaPage(params);
  options3.value = data.records;
}

async function labkeList() {
  const { data } = await getLabelPage({
    pageNum: 1,
    pageSize: 999,
    categoryId: 40
  });
  options4.value = data.records;
}

async function depositoryList() {
  const { data } = await getDepositorySimplePage({
    type: 0,
    status: 0,
    ...params
  });
  options5.value = data.records;
}

function getRef() {
  return ruleFormRef.value;
}

onMounted(() => {
  brandList();
  areaList();
  labkeList();
  depositoryList();
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="门店名称" prop="storeName">
          <el-input
            v-model="newFormInline.storeName"
            clearable
            placeholder="请输入门店名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="瓦特编码" prop="wtCode">
          <el-input
            v-model="newFormInline.wtCode"
            clearable
            placeholder="请输入瓦特编码"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="门店联系人" prop="contacts">
          <el-input
            v-model="newFormInline.contacts"
            clearable
            placeholder="请输入门店联系人"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="门店地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入门店地址"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="newFormInline.contact"
            clearable
            placeholder="请输入联系方式"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="经营属性" prop="type">
          <DictSelect
            v-model="newFormInline.type"
            dict-type="BUSINES_ATR"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="所属品牌" prop="brandId">
          <el-select
            v-model="newFormInline.brandId"
            placeholder="请选择所属品牌"
            clearable
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="所属区域" prop="areaId">
          <el-select
            v-model="newFormInline.areaId"
            placeholder="请选择所属区域"
            clearable
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="门店标签" prop="labelIdList">
          <el-select
            v-model="newFormInline.labelIdList"
            multiple
            placeholder="请选择门店标签"
            clearable
            filterable
          >
            <el-option
              v-for="item in options4"
              :key="item.id"
              :label="item.labelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="门店仓" prop="depositoryIdList">
          <el-select
            v-model="newFormInline.depositoryIdList"
            filterable
            multiple
            placeholder="请选择门店仓"
            clearable
          >
            <el-option
              v-for="item in options5"
              :key="item.id"
              :label="item.depositoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="小娃娃均价" prop="avgPrice">
          <!-- <el-input
            v-model="newFormInline.avgPrice"
            clearable
            placeholder="请输入小娃娃均价"
          /> -->
          <el-input-number
            v-model="newFormInline.avgPrice"
            class="!w-full"
            :min="0"
            :precision="2"
            :step="0.1"
            controls-position="right"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="备注" prop="des">
          <el-input
            v-model="newFormInline.des"
            placeholder="请输入备注信息"
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
